<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组态管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .config-container {
            padding: 20px;
        }
        .table-container {
            margin-top: 15px;
        }
        .el-tag {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="config-container">
            <el-tabs v-model="activeTab">
                <!-- 组态系统类型管理 -->
                <el-tab-pane label="组态系统类型管理" name="system">
                    <div style="margin-bottom: 15px">
                        <el-button type="primary" size="small" @click="addSystemType">新增组态系统类型</el-button>
                    </div>
                    <el-table :data="systemTypes" style="width: 100%">
                        <el-table-column prop="id" label="系统编号" width="120"></el-table-column>
                        <el-table-column prop="name" label="系统类型名称" width="150"></el-table-column>
                        <el-table-column prop="description" label="系统描述"></el-table-column>
                        <el-table-column prop="deviceCount" label="设备数量" width="100" align="center"></el-table-column>
                        <el-table-column label="操作" width="120" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="editSystemType(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="deleteSystemType(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <!-- 组态设备管理 -->
                <el-tab-pane label="组态设备管理" name="device">
                    <div style="margin-bottom: 15px">
                        <el-button type="primary" size="small" @click="addDevice">新增组态设备</el-button>
                    </div>
                    <el-table :data="devices" style="width: 100%; margin-top: 5px;">
                        <el-table-column prop="id" label="设备编号" width="180" align="center"></el-table-column>
                        <el-table-column prop="name" label="设备名称" min-width="200"></el-table-column>
                        <el-table-column prop="systemType" label="所属组态系统" width="180" align="center">
                            <template slot-scope="scope">
                                <el-tag size="medium" effect="plain">{{scope.row.systemType}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="editDevice(scope.row)">
                                    <i class="el-icon-edit"></i> 编辑
                                </el-button>
                                <el-button type="text" size="small" @click="deleteDevice(scope.row)">
                                    <i class="el-icon-delete"></i> 删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

            <!-- 系统类型编辑对话框 -->
            <el-dialog 
                :title="currentSystemType ? '编辑系统类型' : '新增系统类型'" 
                :visible.sync="systemTypeDialogVisible"
                width="500px">
                <el-form :model="systemTypeForm" label-width="100px" size="small">
                    <el-form-item label="系统编号">
                        <el-input v-model="systemTypeForm.id" placeholder="请输入系统编号"></el-input>
                    </el-form-item>
                    <el-form-item label="系统名称">
                        <el-input v-model="systemTypeForm.name" placeholder="请输入系统名称"></el-input>
                    </el-form-item>
                    <el-form-item label="系统描述">
                        <el-input type="textarea" v-model="systemTypeForm.description" placeholder="请输入系统描述"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="systemTypeDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveSystemType">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 设备编辑对话框 -->
            <el-dialog 
                :title="currentDevice ? '编辑设备' : '新增设备'" 
                :visible.sync="deviceDialogVisible"
                width="500px">
                <el-form :model="deviceForm" label-width="100px" size="small">
                    <el-form-item label="设备编号">
                        <el-input v-model="deviceForm.id" placeholder="请输入设备编号"></el-input>
                    </el-form-item>
                    <el-form-item label="所属系统">
                        <el-select v-model="deviceForm.systemTypeId" placeholder="请选择所属系统" style="width: 100%">
                            <el-option 
                                v-for="type in systemTypes"
                                :key="type.id"
                                :label="type.name"
                                :value="type.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-input v-model="deviceForm.name" placeholder="请输入设备名称"></el-input>
                    </el-form-item>
                    <el-form-item label="因子信息">
                        <el-select v-model="deviceForm.factorIds" placeholder="请选择因子信息" style="width: 100%" multiple>
                            <el-option
                                v-for="factor in factors"
                                :key="factor.id"
                                :label="factor.name + ' (' + factor.unit + ')'" 
                                :value="factor.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="deviceDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDevice">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'system',
                    systemTypes: [
                        {
                            id: 'lighting',
                            name: '照明系统',
                            description: '楼宇照明控制系统',
                            deviceCount: 12
                        },
                        {
                            id: 'power',
                            name: '供配电系统',
                            description: '供配电监控系统',
                            deviceCount: 8
                        },
                        {
                            id: 'water',
                            name: '供水系统',
                            description: '供水控制系统',
                            deviceCount: 6
                        }
                    ],
                    devices: [
                        {
                            id: 'D001',
                            name: '主控制器',
                            systemType: '照明系统',
                            systemTypeId: 'lighting',
                            status: '正常'
                        }
                    ],
                    factors: [
                        { id: 'F001', name: '温度因子', unit: '°C' },
                        { id: 'F002', name: '湿度因子', unit: '%' },
                        { id: 'F003', name: '压力因子', unit: 'kPa' },
                        { id: 'F004', name: '流量因子', unit: 'm³/h' },
                        { id: 'F005', name: '电压因子', unit: 'V' },
                        { id: 'F006', name: '电流因子', unit: 'A' }
                    ],
                    currentSystemType: null,
                    currentDevice: null,
                    systemTypeDialogVisible: false,
                    deviceDialogVisible: false,
                    systemTypeForm: {
                        id: '',
                        name: '',
                        description: ''
                    },
                    deviceForm: {
                        id: '',
                        systemTypeId: '',
                        name: '',
                        status: '正常',
                        factorIds: []
                    }
                }
            },
            methods: {
                addSystemType() {
                    this.currentSystemType = null;
                    this.systemTypeForm = {
                        id: '',
                        name: '',
                        description: ''
                    };
                    this.systemTypeDialogVisible = true;
                },
                editSystemType(systemType) {
                    this.currentSystemType = systemType;
                    this.systemTypeForm = { ...systemType };
                    this.systemTypeDialogVisible = true;
                },
                deleteSystemType(systemType) {
                    this.$confirm('删除系统类型将同时删除关联的设备，是否继续？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.systemTypes.indexOf(systemType);
                        if (index > -1) {
                            this.systemTypes.splice(index, 1);
                            // 删除关联设备
                            this.devices = this.devices.filter(d => d.systemTypeId !== systemType.id);
                        }
                        this.$message.success('删除成功');
                    });
                },
                saveSystemType() {
                    if (!this.systemTypeForm.id || !this.systemTypeForm.name) {
                        this.$message.warning('请填写完整信息');
                        return;
                    }
                    
                    if (this.currentSystemType) {
                        const index = this.systemTypes.findIndex(t => t.id === this.currentSystemType.id);
                        if (index > -1) {
                            this.systemTypes.splice(index, 1, {...this.systemTypeForm, deviceCount: 0});
                        }
                    } else {
                        this.systemTypes.push({...this.systemTypeForm, deviceCount: 0});
                    }
                    
                    this.systemTypeDialogVisible = false;
                    this.$message.success('保存成功');
                },
                addDevice() {
                    this.currentDevice = null;
                    this.deviceForm = {
                        id: '',
                        systemTypeId: '',
                        name: '',
                        status: '正常',
                        factorIds: []
                    };
                    this.deviceDialogVisible = true;
                },
                editDevice(device) {
                    this.currentDevice = device;
                    this.deviceForm = { ...device };
                    this.deviceDialogVisible = true;
                },
                deleteDevice(device) {
                    this.$confirm('确认删除该设备吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.devices.indexOf(device);
                        if (index > -1) {
                            this.devices.splice(index, 1);
                            // 更新系统设备数量
                            const systemType = this.systemTypes.find(t => t.id === device.systemTypeId);
                            if (systemType) {
                                systemType.deviceCount--;
                            }
                        }
                        this.$message.success('删除成功');
                    });
                },
                saveDevice() {
                    if (!this.deviceForm.id || !this.deviceForm.systemTypeId || !this.deviceForm.name) {
                        this.$message.warning('请填写完整信息');
                        return;
                    }
                    
                    const systemType = this.systemTypes.find(t => t.id === this.deviceForm.systemTypeId);
                    if (!systemType) {
                        this.$message.warning('所选系统类型不存在');
                        return;
                    }

                    const deviceData = {
                        ...this.deviceForm,
                        systemType: systemType.name,
                        factorNames: this.deviceForm.factorIds.map(id => {
                            const factor = this.factors.find(f => f.id === id);
                            return factor ? factor.name : '';
                        }).join(', ')
                    };
                    
                    if (this.currentDevice) {
                        const index = this.devices.findIndex(d => d.id === this.currentDevice.id);
                        if (index > -1) {
                            this.devices.splice(index, 1, deviceData);
                        }
                    } else {
                        this.devices.push(deviceData);
                        systemType.deviceCount++;
                    }
                    
                    this.deviceDialogVisible = false;
                    this.$message.success('保存成功');
                }
            }
        })
    </script>
</body>
</html>
